<template>
  <div>
    <h1>酒店页面</h1>
    <div id='container'>

    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 创建地图的构造函数 第一个参数是地图的放置容器 是一个id
    // 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性 跟在容器参数后面是一个对象
    window.onLoad = function() {
      var map = new AMap.Map('container', {
        zoom: 15, // 地图放大级别
        // center: [116.397428, 39.90923], //页面加载地图显示的中心点坐标 当前为北京的坐标点
        resizeEnable: true
      })
      //实时路况图层
      var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
      })
      map.add(trafficLayer) //添加图层到地图
      var marker = new AMap.Marker({
        position: [116.39, 39.9] //位置 页面加载默认的显示位置
      })
      map.add(marker) //添加到地图
    }
    var url =
      'https://webapi.amap.com/maps?v=1.4.15&key=64ed95f54e7ab779190aff1ea1b4063d&callback=onLoad'
    var jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    document.head.appendChild(jsapi)
  }
}
</script>

<style lang="scss" scoped>
#container {
  width: 500px;
  height: 300px;
}
</style>